<template>
  <div id="parts">
        <el-tabs id="eltabsproduct" v-model="activeName"  stretch='stretch' @tab-click="handleClick(activeName)"> 
            <div class="num-count" v-show="numCountSate">
                <div class="alone">
                    <p>商品单品数</p>
                    <p>22</p>
                </div>
                <div class="total">
                    <p>库存总数</p>
                    <p>33</p>
                </div>
            </div>
            <el-input placeholder="请输入搜索内容" prefix-icon="el-icon-search" v-model="input"></el-input>
            <img src="../assets/img/deal_icon.png" alt="" class="deal-icon" @click="applayPage">
            <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in tabList" :key='index'>
                <ul class="show_list_product">
                    <li v-for="(item1,index1) in item.goodsList" :key='index1' class="product-list"  @click="ApplyDetailPage(item.label,item1.id)">
                        <p class="item-name">
                            <span class="f_fl">{{item1.id}}</span>
                            <span class="f_fl">{{item1.name}}</span>
                            <span class="f_fr">{{item1.brand}}</span>
                        </p>
                        <p class="item-num">
                            <span class="f_fl">{{item1.createdTime}}</span>
                            <span class="f_fr">{{item1.typeName}}</span>
                            <span class="f_fl goods-id">{{item1.id}}</span>
                            <span>{{item1.price}}</span>
                            <span class="f_fr">{{item1.num}}</span>
                        </p>
                        <el-button class="deal-btn" type="text" v-show="item.label == '返厂' || item.label == '报废'" @click="deal(item.label)">处理</el-button>
                        <!-- <button class="deal-btn" v-show="item.label == '返厂' || item.label == '报废'" @click="deal(item.label)">处理</button> -->
                    </li>  
                </ul>
            </el-tab-pane>
        </el-tabs>
        
  </div>
</template>

<script>
export default {
    name: 'parts',
    data(){
        return {
            activeName: 'first',
            stretch:true,
            tabList:[
                {
                    label:'申请中',
                    name:'first',
                    goodsList:[]
                },
                {
                    label:'新件',
                    name:'second',
                    goodsList:[]
                },
                {
                    label:'返厂',
                    name:'third',
                    goodsList:[]
                },
                {
                    label:'报废',
                    name:'fourth',
                    goodsList:[]
                }, 
            ],
            //搜索框
            input: '',
            numCountSate:false,
        }
    },
    mounted: function(){
        localStorage.setItem("pageId",2);
        this.handleClick('first')
    },
    methods: {
      applayPage:function(){
        this.$router.push({
        path:'/partApplyBut'
        })  
      },
      ApplyDetailPage:function(lable,id){
          localStorage.setItem("detailId",id)
        if(lable==='申请中'){
            this.$router.push({
            path:'/partApplyDetail'
            })  
        }
      },
      handleClick:function(item){
        this.numCountSate=true;
        if(item==='first'){
            this.numCountSate=false;
            this.getApplicationList();
        }else if(item==='second'){

        }else if(item==='third'){

        }else{

        }
      },
      getApplicationList:function(){
        let _this = this;
        let paramfetch = {
            "pageSize":10,
            "page":1,
        }
        this.$fetch(this.$root.domainIp+'repairman/warehouse/forms',{param:this.encrypt(JSON.stringify(paramfetch))})
        .then((response) => {
            // this.loading = false;
            if(response.code == 0){
                let json_data = JSON.parse(this.decrypt(response.data));
                // _this.repairmanDetail = json_data;
                console.log(json_data)
                _this.tabList[0].goodsList = json_data.data;
            }else {
                _this.$message({
                    message:(response.message || '请检查网络是否连接'),
                    center: true
                });
            }
        }).catch(function (error) {
            // this.loading = false;
            console.log(error);
            _this.$message({
                message:('请检查网络是否连接'),
                center: true
            });
        });
      },
      getGoodsList:function(){//获取列表页接口，
        let _this = this;
        let paramfetch = {
            "pageSize":10,
            "page":1,
        }
        this.$fetch(this.$root.domainIp+'repairman/warehouse/forms',{param:this.encrypt(JSON.stringify(paramfetch))})
        .then((response) => {
            // this.loading = false;
            if(response.code == 0){
                let json_data = JSON.parse(this.decrypt(response.data));
                // _this.repairmanDetail = json_data;
                console.log(json_data)
                _this.tabList[0].goodsList = json_data.data;
            }else {
                _this.$message({
                    message:(response.message || '请检查网络是否连接'),
                    center: true
                });
            }
        }).catch(function (error) {
            // this.loading = false;
            console.log(error);
            _this.$message({
                message:('请检查网络是否连接'),
                center: true
            });
        });
      },
      deal:function(label){
          console.log(label)
        this.$confirm('是否确认处理', '', {
          distinguishCancelAndClose: true,
          confirmButtonText: '取消',
          cancelButtonText: '确定',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '取消处理!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '处理成功'
          });          
        });
      }
    }
}
</script>

<style>
#parts{
    width: 90%;
    margin-left: 5%;
    padding-top: 4%;
}
/* header */
.num-count{
    font-size: 0.33rem;
    /* padding-bottom: 1rem; */
}
.num-count div{
    height: 1rem;
    float: left;
    margin-bottom: 0.2rem;
}
.num-count .alone{
    margin-left: 8%;
}
.num-count .total{
    margin-left: 33%;
}
.num-count div p{
    padding: 0.1rem;
}
.el-input{
    margin-bottom: 0.2rem;
}
.el-tabs__nav-scroll{
    color: #ff5000;
}


.footer{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}
.el-tabs__nav-wrap{
    width: 90%;
    margin-left: 5%;
}
.el-tabs__item.is-active{
    color: #ff5000;
}
.el-tabs__active-bar{
    background: #ff5000;
}
.el-tabs__nav-wrap{
    width: 100%;
    margin-left: 0;
}
.product-list{
    border-bottom: 0.02rem solid #E6E6E6;
    font-size: 0.28rem;
}
.product-list p{
    height: 0.64rem;
    line-height: 0.64rem;
}
.goods-id{
    width: 40%;
    display: inline-block;
    text-align: left;
}
.deal-icon{
    width: 0.6rem;
    position: fixed;
    bottom: 1.2rem;
    right: 0.6rem;
}
.deal-btn{
    background: transparent;
    padding: 0.1rem 0.14rem;
    border: 0.01rem solid #E6E6E6;
    border-radius: 0.08rem;
    margin-left: 86%;
    margin-bottom: 0.1rem;
}

.el-button--text{
    color:#ff5000;
}
</style>
